<script setup lang="ts">
import svgIcon from '@/components/base-svgIcon/index.vue';
import { ref } from 'vue';

const inputValue = ref()
const list = ref([
    { id: 1, name: '表格', pos: 'null' },
    { id: 2, name: '控件', pos: 'null' },
    { id: 3, name: '应用模板', pos: 'null' },
    { id: 4, name: '审阅', pos: 'left' },
    { id: 5, name: '审批', pos: 'right' },
    { id: 6, name: '签字', pos: 'right' },
    { id: 7, name: '保存', pos: 'null' }
])
const options = ref([
    { label: '单选', key: '1', },
    { label: '复选', key: '2', },
    { label: '时间', key: '3',  }
])




// 参数
const props = withDefaults(defineProps<{
    disabled?: boolean;
}>(), {
    disabled: false
});

const emit = defineEmits(['saveData', 'middleClick', 'endClick','handleSelect'])


const saveData = () => {
    emit('saveData', inputValue.value)
}

const middleClick = (val: any) => {
    emit('middleClick', val)
}

const endClick = () => {
    emit('endClick', 'right')
}

function handleSelect(params:any) {
    emit('handleSelect', params)
}

</script>
<template>
    <div class="table-header">
        <div class="start">
            <n-input v-model:value="inputValue" type="text" size="small" placeholder="输入文件名字" style="width: 30%;"
                :disabled="disabled" />
            <n-button size="small" style="margin-left: 10px" @click="saveData">保存</n-button>
        </div>
        <div class="middle">
            <div v-for="(item, index) in list" @click="middleClick(item)">
                <n-dropdown v-if="item.name == '控件'" trigger="click" :options="options" @select="handleSelect">
                    <n-button size="small">{{ item.name }}</n-button>
                </n-dropdown>
                <n-button v-else size="small" class="midbtn" >{{ item.name }}</n-button>
            </div>
        </div>
        <div class="end">
            <n-button size="small" @click="endClick">格式</n-button>
        </div>
    </div>
</template>
<style scoped lang="scss">
.table-header {
    display: flex;
}

.start {
    position: relative;
    width: 30%;
    display: flex;
    // justify-content: space-between;
    align-items: center;

}

.middle {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.end {
    width: 11%;
}

.midbtn {
    margin: 0 10px;
}

.icon-pic {
    position: relative;

}

.icon-pic:hover {
    +.icon-home {
        display: block;
    }
}

.icon-home {
    position: absolute;
    top: 50px;
    display: none;
}
</style>
